<template>
  <view class="container">
    <view class="header">
      <uni-icons type="left" size="23" style="vertical-align: middle" @click="goback"></uni-icons>
      <text style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 20rpx">{{ currentdata.name }}</text>
    </view>
    <view class="contentbox"><rich-text :nodes="currentdata.content"></rich-text></view>
    <!--  ~ 我也是有底线的 ~ -->
    <!-- <view class="footer">~ 我也是有底线的 ~</view> -->
    <view class="liuyan" @click="liuyan(currentdata.id, currentdata.name)">留言</view>
    <button @click="$refs.phone.open()" style="position: fixed; bottom: 180rpx; right: 50rpx; padding: 0; width: 100rpx; height: 100rpx; background-color: transparent">
      <image src="../../static/images/kefu.png" style="width: 100rpx; height: 100rpx"></image>
    </button>
    <uni-popup ref="popup" type="center">
      <view class="box">
        <view style="box-sizing: border-box; text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000; margin-bottom: 78rpx">
          提示
        </view>
        <view style="text-align: center; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000; margin-bottom: 74rpx">
          请授权登录后进行留言
        </view>
        <view style="display: flex; justify-content: space-evenly">
          <view class="cancelbtn" @click="$refs.popup.close()">取消</view>
          <view class="shuoquan" @click="shouquan">去授权</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="phone" type="bottom">
      <view class="phone">
        <view class="phoneitem" @click="callkefu(obj.service)">客服1：{{ obj.service }}</view>
        <view class="phoneitem" @click="callkefu(obj.holiday_service)">节假日客服：{{ obj.holiday_service }}</view>
        <view class="phoneitem" @click="callkefu(obj.hours_service)">24小时客服：{{ obj.hours_service }}</view>
        <view class="phoneitem" @click="$refs.phone.close()">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentdata: {},
      obj: {}
    };
  },
  onLoad(opt) {
    console.log(JSON.parse(opt.itemdata));
    const detail = JSON.parse(opt.itemdata);
    this.getdetail(detail.id);
    this.getkefuphone();
  },
  methods: {
    // 获取客服手机号
    async getkefuphone() {
      const res = await uni.$http.get('common/init');
      console.log(res.data.data);
      this.obj = res.data.data;
    },
    // 点击拨打客服电话
    callkefu(phone) {
      console.log(phone);
      uni.makePhoneCall({
        phoneNumber: phone
      });
    },
    // 获取详情
    async getdetail(id) {
      const res = await uni.$http.post('index/getProductInfo', {
        product_id: id
      });
      console.log('--------res----', res.data.data);
      this.currentdata = res.data.data;
    },
    goback() {
      uni.navigateBack();
    },
    // 留言
    liuyan(id, name) {
      if (uni.getStorageSync('token') != '') {
        uni.navigateTo({
          url: `/sub_mearthion/leavemsg/leavemsg?id=${id}&name=` + name
        });
      } else {
        this.$refs.popup.open();
      }
    },
    // 授权
    shouquan() {
      uni.switchTab({
        url: '/pages/my/my'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
button::after {
  background-color: transparent !important;
  text-align: center;
  padding: 0;
  border: none;
}
.container {
  box-sizing: border-box;
  .phone {
    width: 750rpx;
    height: 480rpx;
    text-align: center;
    .phoneitem {
      width: 750rpx;
      height: 120rpx;
      text-align: center;
      line-height: 120rpx;
      background: #ffffff;
    }
  }
  .header {
    margin-top: 60rpx;
    margin-left: 30rpx;
  }
  .contentbox {
    box-sizing: border-box;
    padding: 30rpx;
  }
  .footer {
    text-align: center;
  }
  .liuyan {
    position: absolute;
    bottom: 0;
    width: 690rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    background: linear-gradient(180deg, #058dfb 0%, #0274f9 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin-left: 36rpx;
    margin-bottom: 52rpx;
  }
  .box {
    box-sizing: border-box;
    width: 690rpx;
    height: 400rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding-top: 40rpx;
    .cancelbtn {
      width: 300rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #000000;
      background: #f1f1f1;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
    .shuoquan {
      width: 300rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #fff;
      background: #0278f9;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
